<template>
  <div class="search-wrapper">
    <div class="search-panel">
      <el-row class="m-header-searchbar">
        <el-col :span="3" class="left">
          <img src="//s0.meituan.net/bs/fe-web-meituan/10afbf1/img/logo.png" alt="美团">
        </el-col>
        <el-col :span="15" class="center">
          <div class="wrapper">
            <el-input
              placeholder="搜索商家和商品"
              v-model="search"
              @focus="focus"
              @blur="focusout"
            />
            <button class="el-button el-button--primary"><i class="el-icon-search"></i></button>
            <dl class="hotPlace" v-show="isHotPlace">
              <dt>热门搜索-</dt>
              <dd v-for="(item, index) in hotPlace" :key="index">{{item}}</dd>
            </dl>
            <dl class="searchList" v-show="isSearchList">
              <dd v-for="(item, index) in searchList" :key="index">{{item}}</dd>
            </dl>
          </div>
          <p class="suggset">
            <a href="#">广东财经大学</a>
            <a href="#">广东男德大学</a>
            <a href="#">广东男德大学</a>
            <a href="#">广东男德大学</a>
          </p>
          <ul class="nav">
            <li>
              <nuxt-link to="/" class="takeout">美团外卖</nuxt-link>
            </li>
            <li>
              <nuxt-link to="/" class="movie">猫眼电影</nuxt-link>
            </li>
            <li>
              <nuxt-link to="/" class="hotel">美团酒店</nuxt-link>
            </li>
            <li>
              <nuxt-link to="/" class="apartment">民宿/公寓</nuxt-link>
            </li>
            <li>
              <nuxt-link to="/" class="business">商家入驻</nuxt-link>
            </li>
          </ul>
        </el-col>
        <el-col :span="6" class="right">
          <ul class="security">
            <li><i class="refund"><p class="txt">随时退</p></i></li>
            <li><i class="single"><p class="txt">不满意免单</p></i></li>
            <li><i class="overdue"><p class="txt">过期退</p></i></li>
          </ul>
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<script>
export default {
  name: "searchbar",
  components: {},
  data() {
    return {
      isFocus: false,
      search: "",
      hotPlace:['好爸爸','亲爸爸','浩钦爸爸','6666'],
      searchList: ['我有一个好爸爸','名字叫浩钦','牛逼'],
    }
  },
  computed: {
    isHotPlace() {
      return this.isFocus && !this.search
    },
    isSearchList() {
      return this.isFocus && this.search
    }
  },
  methods: {
    focus() {
      this.isFocus = true;
    },
    focusout() {
      setTimeout(() => {
        this.isFocus = false;
      }, 200)
    }
  }
}
</script>

<style >

</style>
